<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <base href="<%=basePath %>">
    <title>运动康复列表</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../res/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../res/js/tools.js"></script>
    <script src="../res/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use('laydate', function(){
            //layui时间方法，layui显示时间日期要调用此方法
            var laydate = layui.laydate;

            //常规用法
            laydate.render({
                elem: '#newsTimeS'

            });
            //常规用法
            laydate.render({
                elem: '#newsTimeE'
                ,type: 'datetime'
            });
        });
        $(function(){
            $("#seachTable").on("click",function(){
                //执行重载
                //带条件查询
                table2.reload({
                    url:'../../UserseController/selectVague',
                    where: {
                        newsTitle: $("#newsTitle").val()

                    },
                    page: { curr: 1 }
                });
            })
        });

    </script>

    <style type="text/css">
        #seachDiv{
            width: 100%;

        }

        #seachDiv span{
            display: inline-block;

        }

        #divImg{
            position: absolute;
            top:30%;
            left:30%;
            z-index: 999;
            display: none ;


        }


    </style>
</head>

<div class="demoTable">
    搜索：
    <div class="layui-inline">
        <input class="layui-input" name="newsTitle" placeholder="查询名称" id="newsTitle" autocomplete="off">

    </div>


    <input type="button" id="seachTable" class="layui-btn layui-btn-normal" value="搜索" />
</div>
<table id="demo" lay-filter="test"></table>


<script>
    var table2 = null ;
    var table = null;
    layui.use('table', function(){
        table = layui.table;

        //第一个实例
        table2 =  table.render({
            elem: '#demo'
            ,id:'testReload'
            ,height: 550
            ,toolbar: '#toolbarDemo'
            ,url: '../../UserseController/selectAll' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'schemeId', title: '方案ID', width:80}
                ,{field: 'schemeName', title: '方案名称', width:120, sort: true}
               /*,{field: 'schemeName', title: '用户头像',toolbar: '#titleTpl', width:80}*/
                ,{field: 'athleteId', title: '运动员ID', width: 100}
                ,{field: 'athleteName', title: '运动员姓名', width: 180, sort: true}
                ,{field: 'exp', title: '说明,建议', width: 180, sort: true}
               ,{field: 'isRead', title: '是否查看', width: 180, sort: true ,toolbar: '#switchTpl'}
                ,{field: 'readTime', title: '查看时间', width: 180, sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
        });

        table.on('tool(test)', function(obj){
            var data = obj.data;//行数据
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('您真的要删除吗?', function(index){
                    obj.del();
                    layer.close(index);
                    //使用ajax进入后台删除数据库中的数据
                    var url = "../../UserseController/delete";
                    var data$ = {saId:data.saId};
                    alert(data.saId);
                    $.post(url,data$,function(obj){
                        //提示
                        layer.msg(obj.msg);
                    },"json");
                });
            } else if(obj.event === 'edit'){

                var data = obj.data;//行数据

                //iframe层
                layer.open({
                    type: 2,
                    title: '鲜花维护页面',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['80%', '80%'],
                    content: '../pages/Update.html?id='+data.saId, //iframe的url
                    end : function() {
                        table2.reload();
                    }
                });
            }
        });


        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){



                case 'addBtn':
                    //iframe层
                    layer.open({
                        type: 2,
                        title: '鲜花新增页面',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['80%', '80%'],
                        content: '../pages/Update.html', //iframe的url
                        end : function() {
                            table2.reload();
                        }
                    });
                    break;
            };
        });
    });
</script>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">

        <button class="layui-btn layui-btn-sm" lay-event="addBtn">新增</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="titleTpl">
    <img src='{{d.userPhoto}}' alt='显示图片' class='imgcss' onmouseover='showImg(this)'/>
</script>


<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="sex" value="{{d.isRead}}" lay-skin="switch" lay-text="查看|未查看" lay-filter="sexDemo" {{ d.isRead == 1 ?  'checked' : '' }}>
</script>


</body>
</html>